<!-- 
@name: 首页
-->
<template>
	<div id="refund" class="page">

		<div class='whiteWrap'>
			<div class="orderWrap">
				<div class="">
					<div class="text1">退还内容</span></div>
				</div>
				<div class="blockWrap flex-between flex-alignCenter">
					<div class="text2_blockWrap">申请退款金额</div>
					<div class="text2_blockWrap">{{detailData.priceAll}} </div>
				</div>
				<!-- <div class="blockWrap flex-between flex-alignCenter">
					<div class="text3_blockWrap">扣除金额</div>
					<div class="text3_blockWrap">{{detailData.amountDeducted}}</div>
				</div> -->
				<div class="blockWrap flex-between flex-alignCenter">
					<div class="text2_blockWrap">实际退款金额</div>
					<div class="text4_blockWrap">{{detailData.actualRefund}}</div>
				</div>
			</div>
		</div>
		<div class='whiteWrap'>
			<div class="orderWrap">
				<div class="">
					<div class="text1">退款流程</span></div>
				</div>
				<van-steps active-color='#D95954' inactive-color='#999999' direction="vertical" :active="detailData.status == 'REFUND_SUCCESS'?1: 0">
					<van-step>
						<div class="">丰收联盟审核中</div>
						<div class="text5_blockWrap">{{detailData.refundTime}}</div>
					</van-step>

					<van-step>
						<div class="">退款入账</div>
						<div class="text5_blockWrap">退款处理会将<span class="text4_blockWrap" style="font-weight:500">{{detailData.actualRefund}}</span>退回您的账户</div>
					</van-step>
				</van-steps>
			</div>
		</div>
		<div class="bottomButton" v-if="detailData.status != 'REFUND_SUCCESS'">

			<van-button class="button3" @click="cancelRefund_order">取消退款</van-button>

		</div>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			time: 5 * 60 * 1000,
			detailData: {
				text1: '单人儿童套餐',
				text2: '可用时间至2021.10.01',
				text3: '1000积分+1元',
				photo: require('@/assets/images/no-pic.jpg'),
				code: require('@/assets/images/code.jpg'),
				price: '1.00元',
				statusName: '待使用', //待付款 待使用 已完成 已关闭 退款中 已退款 已过期
			},
			queryVendorListTotal: 0,
			reasonTypeList: [],
			queryVendorList: {},
			activeIcon: require('@/assets/images/radio2.png'),
			inactiveIcon: require('@/assets/images/radio.png'),
		};
	},
	created() {
		this.loadOrder_order();
	},
	methods: {
		refund_order(pkey) {
			if (!this.reasonTypeList.length) {
				this.$notify({ type: 'warning', message: '请选择退款原因' });
				return;
			}
			var params = {
				pkey: this.$route.query.pkey,
				reasonTypeList: this.reasonTypeList,
			};
			this.$myApi.refund_order(params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.$router.back();
				} else {
				}
			});
		},
		cancelRefund_order(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.cancelRefund_order(params).then((res) => {
				if (res.code == 0) {
					this.$router.back()
				} else {
				}
			});
		},
		loadOrder_order(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.loadOrder_order(params).then((res) => {
				if (res.code == 0) {
					this.detailData = res.result;
					this.time = new Date(res.result.endDate) - new Date();
					this.queryVendor_goods();
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less">
#refund {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 2rem;
	.img-icon {
		height: 0.32rem;
		width: 0.32rem;
	}
	.button3 {
		background: #ffce17;
		border-radius: 50px;
		font-size: 0.32rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.3rem 0.57rem;
		height: auto;
		width: 100%;
	}
	.button2 {
		border-radius: 50px;
		font-size: 0.32rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.3rem 0.57rem;
		height: auto;
		margin-right: 0.16rem;
	}
	.bottomButton {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0.16rem 0.24rem;
		background: #fff;
		.text1 {
			font-size: 0.22rem;
			color: #333333;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.3rem;
			color: #d95954;
			margin-right: 0.2rem;
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
	}
	.goodsWrap {
		.code {
			margin: 0.5rem 0;
			width: 100%;
			img {
				width: 2.74rem;
				height: 2.74rem;
			}
		}
		.icon1 {
			height: 1.2rem;
			width: 1.2rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.text1 {
			font-size: 0.28rem;
			color: #000000;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.24rem;
			color: #666666;
			margin-bottom: 0.1rem;
		}
		.text3 {
			font-size: 0.28rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #d95954;
		}
		.text4 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
			margin-top: 0.2rem;
		}
		.text5 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.text6 {
			padding: 0rem 0.3rem;
			font-size: 0.24rem;
			color: #666666;
			background: #f5f5f5;
			margin-left: 0.1rem;
			border-radius: 20px;
		}
		.codeList {
			background: #fafafa;
			border-radius: 10px;
			width: 100%;
			padding: 0.3rem;
			margin-top: 0.3rem;
			padding-bottom: 0;
			.text1_codeList {
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
			}
			.text2_codeList {
				font-size: 0.26rem;
				color: #d95954;
			}
			.text3_codeList {
				text-decoration: line-through;
				font-size: 0.25rem;
				font-weight: bold;
				color: #999;
			}
			.text4_codeList {
				font-size: 0.26rem;
				color: #999;
			}
		}
	}
	.orderWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text5_blockWrap {
			font-size: 0.24rem;
			color: #999999;
		}
		.blockWrap {
			margin-bottom: 0.2rem;
			padding: 0.2rem 0;
			border-top: 1px solid #ededed;
			.text2_blockWrap {
				font-size: 0.28rem;
				color: #333333;
			}
			.text3_blockWrap {
				font-size: 0.28rem;
				color: #ff4358;
			}
		}
		.text4_blockWrap {
			font-size: 0.28rem;
			font-weight: bold;
			color: #d95954;
		}
		.text5_blockWrap {
			font-size: 0.24rem;
			color: #999999;
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
	background: #f8f8f8;
}
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>